<template>
  <!-- mv推荐 -->
  <div class="mod-mv mod-bg">
    <div class="container">
      <div class="index-hd">
        <h2 class="index-title">最新MV</h2>
        <a href="javascript:;" class="more-right" @click="clickMvs">
          更多
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>
      <div class="mv-main">
        <div class="mv-first">
          <video-box
            v-if="mvUrl.length > 0"
            class="mv-video"
            :url="mvUrl"
            :brs="brs"
            :r="r"
            @boxChangeBr="getMvUrl"
          ></video-box>
          <h4 class="playlist-title">
            <a
              href="javascript:;"
              class="playlist-title-txt"
              :title="mvshow.name"
              @click="clickMv(mvshow.id)"
            >
              {{ mvshow.name }}
            </a>
          </h4>
          <h4 class="playlist-author">
            <a
              v-for="(artist, n) in mvshow.artists"
              :key="n"
              href="javascript:;"
              :title="artist.name"
              @click="clickArtistDetail(artist.id)"
            >
              <i v-if="n > 0"> / </i>
              {{ artist.name }}
            </a>
          </h4>
        </div>
        <div class="mv-list">
          <ul class="mv-item-ul">
            <li class="mv-item-li" v-for="item in mvs" :key="item.id">
              <mv-list :item="item"></mv-list>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MvList from "components/mvlist/MvList.vue";
import VideoBox from "components/videobox/VideoBox.vue";

export default {
  data() {
    return {
      mvshow: {},
      mvUrl: "",
      mvs: [],
      brs: [],
      r: 1080,
    };
  },
  components: {
    MvList,
    VideoBox,
  },
  mounted() {
    this.getMvFirst();
  },
  methods: {
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    clickMvs() {
      this.$router.push("/mvs");
      document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
    },
    clickMv(id) {
      this.playMv(id);
      document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
    },
    getMvDetail() {
      this.axios({
        // mv详情接口地址
        url: "/mv/detail?mvid=" + this.mvshow.id,
      })
        .then((res) => {
          this.brs = res.data.data.brs;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMvUrl(clickR) {
      this.axios({
        /* mv播放地址接口地址 */
        url: "/mv/url?id=" + this.mvshow.id + "&r=" + clickR,
      })
        .then((res) => {
          this.mvUrl = res.data.data.url;
          this.r = res.data.data.r;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMvFirst() {
      this.axios({
        /* 最新mv接口地址 */
        url: "/mv/all?order=最新&limit=9",
      })
        .then((res) => {
          // console.log(res);
          this.mvshow = res.data.data[0];
          this.getMvUrl(1080);
          this.getMvDetail();
          this.mvs = res.data.data.slice(1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-mv .index-hd {
  margin-bottom: 20px;
}
.mod-mv .more-right {
  position: absolute;
  right: 10px;
  bottom: 5px;
}
.mv-main {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.mv-first {
  float: left;
  width: 40%;
  padding-right: 20px;
}
.mv-list {
  float: left;
  width: 60%;
}
.mv-item-li {
  float: left;
  width: 25%;
}
.mv-video {
  width: 100%;
  height: 100%;
}
</style>